<template>
  <div>

	  <myheader></myheader>
	<br><br>
	
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				用户名：<input type="text" v-model="username">
			</div>
			<br>
			<div>
				密码： <input type="password" v-model="password">
			</div>
			<br>
            <br>
            <center>
            <div>
                <drag-verify 
                :width="width"
                :height="height"
                :text='text'
                ref='Verify'
                
                
                ></drag-verify>
                
            </div>
            <br>
            
            </center>
            
            <br>
			
			
			<Button @click="login">登录</Button>&nbsp;&nbsp;
            <img @click="sina" src="http://127.0.0.1:8000/static/sina.png" alt="">
            &nbsp;&nbsp;
            <img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png" alt="">



		</div>
	</section>
	
	<myfooter></myfooter >
	
	
	
	 
    
  </div>
</template>

<script>
//组件包含 头部 和尾部
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

//导入滑块验证码
import dragVerify from 'vue-drag-verify';

export default {
    data(){
        return {
            //面包屑导航
            datas:[{'title':'首页',route:{name:'index'}},{title:"登录页面"}],
            username:"",
            password:"",
            width:200,
            height:40,
            text:'请将滑块拖至到右侧'
            
        }
    },
    //定义组件
    components:{
        'myheader':myheader,
        'myfooter':myfooter,
        //定义滑动模块
        'dragVerify':dragVerify
    },
    methods:{
        //钉钉登录
        dingding(){
            var appid = 'dingoaukgkwqknzjvamdqh'
            var redirect_uri = 'http://localhost:8000/dingding_back/';

            var url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
            window.location.href = url;
            
        },
        //新浪微博登录
        sina(){
            let url = "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";
            window.location.href =url;
        },
        //跳转
        
        //登录事件
        login: function() {
            //判断是否拖动滑动
            console.log(this.$refs.Verify.isPassing);
            // 判断
            if (this.username == "") {
                // alert("用户名不能为空");
                this.$Message("用户名不能为空");
                return false;
            }
            if (this.password == "") {
                this.$Message("密码不能为空");
                return false;
            }
            // 请求后台接口
            this.axios({
                url: "http://localhost:8000/login/",
                params: {
                username: this.username,
                password: this.password
                }
            }).then(resp => {
                // 判断后台验证是否正确
                if (resp.data.code == 200) {
                // 将获取到的uid,及username写入到sessionStorage中
                // sessionStorage["uid"] = resp.data.uid;
                // sessionStorage["username"] = resp.data.username;
                //存储用户信息
                localStorage.setItem('username',resp.data.username)
                localStorage.setItem('uid',resp.data.uid)
                // 如果正确，则重定向到首页
                this.$router.push({ path: "/" });
                console.log(resp);
                } else {
                // 如果不正确，给出错误位置，进行修改
                this.$Message(resp.data.message);
                console.log(resp);
        }
      });
    }
    }

}
</script>

<style>

</style>